/* GLOBALS
 ******************************************************************************/
 
@background-color:#222222;
@background-color-alt:#444444;
@foreground-color:#eeeeee;
@radius:5px;

@content-left-margin:0px;
@content-left-margin-reset:0px;


/* UTILITY FUNCTIONS
 ******************************************************************************/

.border-radius {
	border-radius:@radius;
	-moz-border-radius:@radius;
	-webkit-border-radius:@radius;
}

.rounded {
	border-radius:500px;
	-moz-border-radius:500px;
	-webkit-border-radius:500px;
}

.nullspacing {margin:0; padding:0; width:auto; height:auto;}

.striplist {.nullspacing; list-style-type:none; display:inline;}

.striplink {text-decoration:none; color:@background-color;}

.typography_header {
	font-family: 'futura-pt', helvetica, sans-serif;
	font-weight: 700;
	text-transform: uppercase;
	text-decoration: none;
	letter-spacing: 0em;
	word-spacing: 0em;
	line-height: 1em;
}

.typography_body {
	font-family: 'franklin-gothic-urw', helvetica, sans-serif;
	font-style: normal;
	font-weight: 400;
	text-transform: none;
	text-decoration: none;
	letter-spacing: -0.05em;
	word-spacing: -0.02em;
	line-height: 1.3em;
}

.typography_special {
	font-family:'minion-pro', georgia, serif;
	font-weight:500;
	font-style:italic;
}

.columns {
	-moz-column-count: 3;
	-moz-column-gap: 30px;
	-webkit-column-count: 3;
	-webkit-column-gap: 30px;
	column-count: 3;
	column-gap: 30px;
}

.no-columns {
	-webkit-column-count:1;
	-moz-column-count: 1;
	column-count:1;
}

/* PAGE STYLES
 ******************************************************************************/

body {
	.nullspacing; 
	.typography_body;
	h1, h2, h3, h4 {
		.typography_header; 
		font-size:2em;
		a {
			text-decoration:none;
		}
	}
	h2 {font-size:1.6em}
	h3 {font-size:1.3em}
	h4 {font-size:1.1em}
	
	input {.typography_body}
	
	p, li {font-size:100%;}
	
	a {
		color:@background-color;
		&:hover {
			color:@background-color-alt;
			text-decoration:none;
		}
		&:visited {
			color:@background-color-alt;
		}
	}
}

header {
	position:relative;
	.menu-nav-menu-container {
		background:@background-color;
		border:1px solid #000;
		overflow:auto;
		margin-bottom:2em;
		clear:both;
		li, ul {
			.striplist;
		}
		li a {
			font-size:90%;
			text-decoration:none;
			text-transform:uppercase;
			margin:0;
			padding:.5em 1em;
			display:block;
			float:left;
			color:@foreground-color;
			font-weight:400;
			font-family:'futura-pt', sans-serif;
			&:hover {
				background:@background-color-alt;
			}
		}
		li.current-menu-parent a, li.current-menu-item a {
			font-weight:700;
			color:#fff;
			background:@background-color-alt;
		}
		li#search_link a {
			float:right;
		}
	}
	#logo { 
		float:left;
		img {
			border:none;
			padding: 2.2em 0 1.8em 0;
		}
	}
	#breadcrumb {
		font-style: normal;
		text-align: center; 
		padding: .8em 0;
	}
	form#searchform {
		float:right;
		padding:2.2em 0 1.8em 0;
		div input {
			padding-left:.5em;
			padding-right:.5em;
		}
	}
	#cta {
    	float: right;
    	margin-top: 2.4em;
    	margin-right:.5em;
		a {
		    background: orange;
		    text-decoration: none;
		    color: white;
		    padding: .25em .75em;
		    .rounded;
		    font-size: 85%;
		    margin-right: .5em;
		    &#submit {
		    	background:#729fc1;
		    }
		}
	}
}

#featured_content {
	padding-bottom: 1.75em; 
	margin-bottom: 1em;
	margin-top:.5em;
	h1 {
    	position: absolute;
    	background: rgba(0, 0, 0, .4);
   		color: #fff;
   		padding: .25em .5em;
		margin-bottom:.2em;
		a {
			color:#fff;
		}
	}
	.sevencol, .fivecol, .sixcol, .threecol {
		position:relative;
	}
	#featured_caption {
		.typography_special;
		font-size:70%;
		text-transform:lowercase;
		display:block;
		margin-bottom:.2em;
		color:#dedede;
	}
	#feature_thumb_container {
		height:350px;
		overflow:hidden;
		img {
			max-width:300%;
		}
	}
}

#new {
	font-size:140%;
	border-top:1px solid #ccc;
	background:url('/wp-content/themes/tays-t/images/down_arrow.png') no-repeat 12px 13px #eee;
	margin-bottom:1.75em;
	.typography_special;
	text-transform:lowercase;
	line-height:1.45em;
	a {
		color:#000;
		text-decoration:none;
		display:block;
	    text-align:center;
		background:url('/wp-content/themes/tays-t/images/down_arrow.png') no-repeat right 13px;
		margin-right:12px;
		padding:.25em 0 .25em 12px
    }
}

#category_posts {
	.query {
		margin-bottom: 1.5em; 
		font-style: italic; 
		font-size:18px;
	}
	.query.active {
		background:url('/wp-content/themes/tays-t/images/loader.gif') no-repeat left;
		text-indent:23px;
	}
	.author_posts_container {padding-left:30px;}
	.date {
	    text-align: right;
	    font-size: 120%;
	    color: #999;
		span {
		    display: block;
		    font-size: 165%;
		    margin-bottom: .25em;
		    font-weight: bold;
		    &.day {
		    	font-weight:normal;
		    	font-size:125%;
		    }
		}
	}
	.post {
		padding-top:0;
		padding-bottom:1em;
		margin-bottom:1em;
		border-bottom:1px solid #e6e6e6; 
		clear:both;
		overflow:auto;
		h1 {
			margin-bottom:.5em;
			img {
			    height: 22px;
			    margin-right: 4px;
			    opacity: .75;
			}
		}
		img {
			border:none;
		}
		&.past {
			opacity:.35;
		}
		#rating {
			margin-bottom:.5em;
    		background: #eee;
    		display: inline-block;
    		padding: .25em .75em;
			em {
				font-weight:bold;
			}
		}
	}
	.issue {
		// margin-right: 2.6%;
		margin-bottom:2.8%;
	}
	#infscr-loading {
		text-align:center;
	}
}

.eboard {
	margin-bottom:1.5em;
	padding:0 1em;
	color:#444;
	h4 {
		.typography_special;
		text-transform:lowercase;
		font-size:100%;
		margin-bottom:.2em;
	}
	p {
	    .typography_header;
	    font-size:105%;
	    margin-bottom:1em;
	}
	margin-bottom:1em;
}

.contributers {
	padding:1em;
	background:#fff;
	font-family: 'minion-pro';
	font-style: italic;
	font-size: 120%;
}

.container .post {
	h2, h3 {
		margin-bottom:.5em;
	}
	
	h1 {
		margin-bottom: .25em;
		margin-left:@content-left-margin;	
	}
	h2#credit {
		.typography_special;
		text-transform:none;
		font-size: 1.25em; 
		display: block; 
		margin-bottom: 1em;
		margin-left:@content-left-margin;
	}
	
	#content {
		overflow:hidden;
		position:relative;
		padding-left:@content-left-margin;
		img {
			float:left; margin:0 1em 1em 0;
			margin-left:@content-left-margin-reset;
		}
		img.alignright {
			float:right; margin:0 0 1em 1em;
		}
		#rating {
			position: absolute; 
			top: 0; left: 0; 
			background: @background-color; 
			color: @foreground-color;
			padding: .5em 1em;
			margin-left:0;
			em {
				font-weight:bold;
				color:#fff;
			}
		}
		p {
			margin-bottom:1em;
			// text-align:justify;
			img, a img {
				margin-left:-@content-left-margin;
			}
		}
	}

	#photos {
		.photobox {
			img {
				width:201px;
				margin:0;
				float:left;
			}
			margin:0 5px 10px 5px;
		}
	}
	
	#sidebar {
		background:#e9e9e9;
		padding-top:1em;
		h2 {
			// stuff
		}
		#cd_info, #touring_info, #artist_info, #photoset_info, #venue_info {
			padding:0 1em 1em 1em;
		}
		#cd_info ol {
			padding:0;
			list-style-type:none;
			li {
				padding:.15em 0;
				margin-bottom:.25em;
				.border-radius;
				#loading_text {
					display:none;
				}
				&.active {
					margin-bottom:1em;
					#loading_text {
						display:block;
					}
				}
				.play, .close {
					background:@background-color;
					color:@foreground-color;
					.border-radius;
					font-size:75%;
					text-transform:uppercase;
					padding:.25em .5em;
					cursor:pointer;
				}
				.play:hover, .close:hover {
					background:#555555;
				}
				.play:active, .close:active {
					background:#000;
				}
				&.rec {
					.play, .close {
						background:#FFD700;
						color:@background-color;
					}
					.play:hover, .close:hover {
						background:#FFE140;
					}
					.play:active, .close:active {
						background:#A68C00;
					}
				}
				object {
					margin-top:.5em;
				}
			}
		}
		#artist_info, #venue_info {
			img {
				float:left;
				margin:0 1em 1em 0;
			}
		}
		#touring_info, #venue_info {
			.geo {
				display:none;
			}
			ul {
				list-style-type:none;
				padding:0;
				li  {
					margin-bottom:.40em;
					p {
						margin-left:70px;
					}
					a {
						font-size:80%;
						margin-left:70px;
						display:block;
					}
				}
			}
		}
		.date {
			position:absolute; 
			.typography_special;
			display:inline-block;
			background:#ccc;
			padding:4px 6px;
			margin-left:-70px;
			.border-radius;
			width:50px;
			text-align:center;
		}
	}
	
	#related_posts {
    	border-top: 1px solid #ccc;
    	padding-top: 2em;
   		margin-top: 2em;
	}
	
	#comments {
		font-size:90%; 
		margin-top:1.5em;
		padding-top:2em;	
		border-top:1px solid #ccc;
	}
}

footer {
	padding-top:2em;
	padding-bottom:1em;
	.border-radius;
	div {
		background:#eee;
		p {
			font-style:italic;
			line-height:2em;
		}
		p, form {
			float:left;
			margin:1em;
		}
		input {
			padding-left:.5em;
			padding-right:.5em;
		}
	}
}

#fourohfour, #empty {
	.typography_special;
	text-align:center;
	margin-top:5em; margin-bottom:5em;
	h1 {
		font-size:500%;
		text-transform:lowercase;
		.typography_special;
	}
	p {font-size:150%; line-height:2em;}
}

#empty {
	// stuff
	h1 {font-size:200%;}
}

/* MOBILE OVERRIDES
 ******************************************************************************/

@media handheld, only screen and (max-width: 767px) {

	header {
		#logo img {
			padding:1.5em 0 1em 0;
		}
		form#searchform {	
			float:left;
			clear:both;
			padding-top:0;
			padding-bottom:0;
			margin-bottom:1.4em;
		}
		#cta {
			display:none;
		}
	}
	
	#featured_content {
		padding-bottom:.5em;
		#feature_thumb_container {
			height:300px;
			overflow:hidden;
			img {
				max-width:100%;
			}
		}
		.sixcol {
			margin-bottom:1.5em;
		}
		.sixcol h1, .threecol h1 {
			margin-right:20px;
		}
		.threecol.last {
			display:none;
		}
	}
	
	#new {display:none;}
	
	#category_posts .post .twocol, #category_posts .post .onecol {
		img, p {
			display:none;
		}
		p.date {
			display:block;
			float:none;
			text-align:left;
			margin-bottom:.5em;
			color:#000;
			span {
				display:inline;
				font-size:100%;
			}
		}
	}
	
	.container  {
		#comments {display:none;}
		.post {
			h1, h2#credit {
				margin-left:0;
			}
					
			#content {
				.no-columns;
				padding-left:0;
				img, p img, a img, p a img {margin-left:0;}
				img.alignright {margin-left:1em;}
				p {margin-left:0;}
			}
			
			#sidebar {
				padding-top:2em; margin-top:1.5em;
				padding-bottom:1.5em;
			}
		}
	}
}
